<template>
  <div v-if="isShowPage" :class="s['l-wrapper']">
    <div :class="s['l-score']">
      <section :class="s['m-score']">
        <div :class="s['m-score__bg']">
          <div :class="s['m-score__bd']">
            <span :class="s['m-score__score']">{{ scoreInfo ? scoreInfo.score : '0' }}</span> <span :class="s['m-score__score-word']">分</span>
          </div>
          <div :class="s['m-score__ft']">
            <div :class="s['m-score__msg']">{{ userInfo ? '感谢您的参与！' : '活动已经结束！'}}</div>
            <div :class="s['m-score__close']">答题截止日期：5月8日 12:00</div>
          </div>
        </div>
      </section>
    </div>
    <div :class="s['l-top']">
      <div :class="s['m-content']">
        <div :class="s['m-content__border']">
          <section :class="s['m-content__bd']">
            <div :class="s['m-top']">
              <h2 :class="s['m-top__hd']">排行榜</h2>
              <div :class="s['m-top__bd']">
                <ul :class="s['m-top__ul']">
                  <li v-for="(item, index) in tops" :key="index" :class="s['m-top__item']">
                    <div :class="s['m-top__left']">
                      <div :class="s['m-top__left-hd']">
                        <span :class="s['m-top__num']">{{ index + 1 }}</span>
                        <img :class="s['m-top__photo']" :src="item['weixin_headimg']" />
                      </div>
                      <div :class="s['m-top_left-bd']">
                        <div :class="s['m-top__name']">{{ item['real_name'] }}</div>
                        <div :class="s['m-top__time']"><span>{{ item.createdAt | formatDate }}</span><span>用时 {{ item['spend_time'] | formatTimeUse }}</span></div>
                      </div>
                    </div>
                    <div :class="s['m-top__score']">{{ item['total_score'] }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import localstorage from 'store'
  import utils from "../utils"
  import U from 'src/helper'
  import axios from 'axios'
  import qs from 'qs'
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  export default {
    data() {
      return {
        isShowPage: false,
        tops: [],
      }
    },
    filters: {
      formatDate(value) {
        const
          time = new Date(value),
          month = time.getMonth() + 1,
          day = time.getDate(),
          hour = time.getHours(),
          minute = time.getMinutes()
        return `${month}月${day}日 ${hour}:${minute}`
      },
      formatTimeUse(value) {
        return U.formatTimeUse(value)
      }
    },
    computed: {
      userInfo() {
        return localstorage.get('userInfo')
      },
      scoreInfo: {
        get: function () {
          return localstorage.get('scoreInfo')
        },
        set: function(scoreInfo) {
          localstorage.set('scoreInfo', scoreInfo)
        }
      }
    },
    created() {
      this.init()
    },
    mounted(){
      utils.jsSdkSignatureReady(() => {
        utils.shareWeixin({
          title: `纪念五四运动100周年知识竞答中，我考了${localstorage.get("scoreInfo").score}分`,
          desc: "邀你参与，一起PK！",
          link: "https://weixin.zhujia100.com/h5/dati-app/index.html",
          imgUrl: "https://weixin.zhujia100.com/h5/dati-app/"+require("src/assets/images/share.jpg")
        });
      });
    },
    methods: {
      init() {
        if(this.scoreInfo.isUpdate === true){
          this.setTop()
        }
        else {
          this.sendScore().then(() => this.setTop())
        }
      },
      // 结束时的代码
      /* init() {
        this.setTop()
      }, */
      sendScore() {
        const userInfo = this.userInfo
        const scoreInfo = this.scoreInfo
        // const query = this.bmob.Query('member')
        // query.set("openid", Math.random().toString(36).substr(2))
        const weixinInfo = localstorage.get('weixinInfo')
        /* query.set("openid", weixinInfo?weixinInfo.openid:Math.random().toString(36).substr(2))
        // query.set("weixin_name", Math.random().toString(36).substr(2))
        query.set("weixin_name", weixinInfo?weixinInfo.nickname:Math.random().toString(36).substr(2))
        query.set("weixin_headimg", weixinInfo?weixinInfo.headimgurl:'http://img3.imgtn.bdimg.com/it/u=4021563241,1389517044&fm=15&gp=0.jpg')
        query.set("real_name", userInfo.name)
        query.set("phone_number", userInfo.mobile)
        query.set("company_name", userInfo.company)
        query.set("total_score", scoreInfo.score)
        query.set("spend_time", scoreInfo.timeUse) */
        return U.reqP.call(this, axios.post('https://www.kuashou.com/fivefour/insert', qs .stringify({
          openid: weixinInfo?weixinInfo.openid:Math.random().toString(36).substr(2),
          weixin_name: weixinInfo?weixinInfo.nickname:Math.random().toString(36).substr(2),
          weixin_headimg: weixinInfo?weixinInfo.headimgurl:'http://img3.imgtn.bdimg.com/it/u=4021563241,1389517044&fm=15&gp=0.jpg',
          real_name: userInfo.name,
          phone_number: userInfo.mobile,
          company_name: userInfo.company,
          total_score: scoreInfo.score,
          spend_time: scoreInfo.timeUse
        })), {
          loadingMsg: '上传得分',
          errMsg: '上传出错，请刷新页面'
        }).then(() => {
          this.scoreInfo.isUpdate = true
          this.scoreInfo = this.scoreInfo
        })
      },
      setTop() {
        // const query = this.bmob.Query("member")
        // query.order("-total_score", "spend_time")
        return U.reqP.call(this, axios.get('https://www.kuashou.com/fivefour/queryAll')).then(res => {
          const top65 = res.data.slice(0, 65)
          this.tops = top65
          this.isShowPage = true
        })
      }
    }
  }
</script>
<style module="s" lang="less">
  @import "~less/index.less";
  @scoreHeight: calc(244 * 100vw / 480);
  @msgHeight: 15vw;
  @topHeight: calc(100vh - @scoreHeight - @msgHeight - 40px - 30px);
  @topDownHeight: calc(@topHeight - 70px);
  .l-score {
    margin-bottom: 20px;
  }
  .l-top {
    margin: 0 20px;
  }
  .m-score {
    &__bg {
      background: #fff url("src/assets/images/score.jpg") no-repeat;
      background-size: 100% auto;
    }
    &__bd {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f60;
      font-size: 3vw;
      font-weight: bold;
      height: @scoreHeight;
      text-shadow: 0 0 10px yellow;
    }
    &__score {
      font-size: 10vw;
    }
    &__score-word {
      position: relative;
      bottom: -1vw;
      left: 1vw;
    }
    &__ft {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
      height: @msgHeight;
    }
    &__msg {
      color: #f90;
      font-weight: bold;
      font-size: 20px;
    }
    &__close {
      font-size: 14px;
    }
  }
  .m-content {
    .m-content();
    &__bd {
      height: @topHeight;
      padding: 0 20px;
      overflow: hidden;
    }
  }
  .m-top {
    &__hd {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      font-size: 16px;
      font-weight: bold;
      color: #ccc;
      &:before {
        content: '—';
        margin-right: 10px;
      }
      &:after {
        content: '—';
        margin-left: 10px;
      }
    }
    &__bd {
      overflow: auto;
      -webkit-overflow-scrolling:touch;
      height: @topDownHeight;
    }
    &__ul {
      /**/
    }
    &__item {
      display: flex;
      align-items: center;
      min-height: 3em;
      margin-bottom: .5em;
      overflow: hidden;
      &:last-child {
        margin-bottom: 0;
      }
    }
    &__left {
      flex: 1;
      display: flex;
      margin-right: 10px;
      align-items: center;
    }
    &__left-hd {
      position: relative;
      align-self: flex-start;
    }
    &__left-bd {
      //
    }
    &__name {
      line-height: 1.5em;
    }
    &__time {
      font-size: 12px;
      line-height: 1.5em;
      color: #999;
      display: flex;
      flex-wrap: wrap;
      & span:first-child {
        margin-right: 5px;
      }
    }
    &__num {
      position: absolute;
      top: 0;
      left: 0;
      background: #666;
      border-radius: 100%;
      font-size: 10px;
      width: 1.5em;
      height: 1.5em;
      line-height: 1.5em;
      text-align: center;
      color: #fff;
      margin-right: 5px;
    }
    &__item:nth-of-type(1) {
      .m-top__num {
        background: #f60;
      }
    }
    &__item:nth-of-type(2) {
      .m-top__num {
        background: lighten(#f60, 10%);
      }
    }
    &__item:nth-of-type(3) {
      .m-top__num {
        background: lighten(#f60, 20%);
      }
    }
    &__photo {
      vertical-align: top;
      border-radius: 100%;
      width: 3em;
      height: 3em;
      margin-right: 10px;
    }
    &__score {
      color: #f60;
      font-weight: bold;
    }
  }
</style>
